<template>
<div style="background-color: white">

  <el-container style="height: 800px; border: 1px solid #eee;">

    <el-aside width="200px" style="margin-top: 1%" >
      <div style="width: 190px;background-color: white;padding: 5px;margin: auto">
        <img v-bind:src="user.avatar" width="150px" height="150px" style="border-radius: 300px;margin-left: 8%">
        <br>
        <br>
        <p style="margin:0 auto;text-align: center" >{{user.nickname}}</p>
      </div>

      <br>
      <br>
      <el-menu :default-openeds="['1','2']">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>用户中心</template>
          <el-menu-item-group>

            <router-link class="alink" to="/mycenter/my"><el-menu-item index="1-1">个人信息</el-menu-item></router-link>
            <router-link class="alink" to="/mycenter/myorder"><el-menu-item index="1-2">我的订单</el-menu-item></router-link>
          </el-menu-item-group>

        </el-submenu>


      </el-menu>
    </el-aside>


    <el-container style="background-color: white">
      <el-main>
        <router-view/>
      </el-main>
    </el-container>



  </el-container>

</div>
</template>

<script>
import cookie from "js-cookie";
export default {
  name: "Space",
  data() {

    return {
      user:{
      }
    }
  },
  created(){
    this.showInfo()
  },
  methods:{
    showInfo() {
      //从cookie中获取信息
      var userStr =cookie.get("guli_ucenter");
      //转字符串转换成json对象(js对象)
      if (userStr) {
        this.user = JSON.parse(userStr);
      }
  }
  }
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.alink{

  text-decoration: none;
}
</style>

